<template>
  <div class="newCard">
    <!-- <p class="titleadd">编辑设备</p> -->
    <div class="cardmsg">
      <!--:inline="true"  -->
      <el-form label-width="100px" class="addForm" :inline="true">
        <el-form-item label="设备名称">
          <el-input disabled v-model="passForm.sn"></el-input>
        </el-form-item>

        <el-form-item label="设备经度">
          <el-input v-model="passForm.longitude" type="number"></el-input>
        </el-form-item>
        <el-form-item label="设备纬度">
          <el-input v-model="passForm.latitude" type="number"></el-input>
        </el-form-item>
        <div style="width: 100%;height: 500px;">
           <MapPos :propsPoint="[passForm.longitude,passForm.latitude]" @saveErae="getlocat"></MapPos>
        </div>
       
        <el-form-item>
          <el-button @click="canaelSumbit">返回</el-button>
          <el-button type="primary" @click="submitForm()">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import MapPos from "@/components/AMap/index.vue";
export default {
  components: {
    MapPos
  },
  props: {
    formData: {
      type: Object
    }
  },
  data() {
    return {
      passForm: {}
    };
  },
  created() {
    this.passForm = Object.assign({}, { ...this.formData });
  },
  mounted() { 
  },

  methods: {
    // 地图传过来的坐标
    getlocat(area) {
      this.$set(this.passForm, "longitude", area[0]);
      this.$set(this.passForm, "latitude", area[1]);
    },

    submitForm() {
      if (!this.passForm.longitude || !this.passForm.latitude) return;
      let param = {
        _id: this.passForm._id,
        longitude: this.passForm.longitude,
        latitude: this.passForm.latitude,
        dbName: "sys_device_info"
      };
      this.$api.resource.sys_device_edit_local(param).then(res => {
        if (res.code !== 0) return;
        this.$message({
          showClose: true,
          message: "修改成功！",
          type: "success",
          duration: 2000
        });
        this.$emit("editSuccess");
      });
    },
    // 返回
    canaelSumbit() {
      this.$emit("editClose");
    }
  }
};
</script>

<style lang="scss" scoped>
.mapPos {
  height: 150px;
}
.newCard {
  .titleadd {
    line-height: 50px;
    padding: 0 20px;
    border-left: 5px solid rgb(30, 175, 243);
    margin-bottom: 30px;
  }
}
.addForm {
  margin: 0 auto;
  width: 94%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  .el-form-item {
    width: 30%;
    margin-bottom: 60px;
    height: 40px;
    &:nth-last-child(1) {
      width: 90%;
      text-align: center;
    }
  }

  .el-form-item__content {
    width: 100%;
    .el-cascader {
      width: 330px;
    }
    .el-select {
      width: 330px;
    }
    .el-input {
      width: 330px;
    }
  }
  .el-form--inline .el-form-item__content {
    width: 300px !important;
  }
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.swictbtn {
  margin-right: 20px;
}
</style>
